<template>
  <div>
    <div class="top">
      <el-form :inline="true">
        <el-form-item>
          <el-select v-model="value" :Popper-append-to-body="false">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="value" :Popper-append-to-body="false">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input
            placeholder="姓名、手机号"
            v-model="input3"
            class="searchInput"
          >
            <template #suffix>
              <i class="iconfont iconfangdajing" @click="search"></i>
            </template>
          </el-input>
        </el-form-item>
      </el-form>
      <el-button @click="addUserLists" type="primary" size="small"
        >新增</el-button
      >
    </div>
    <el-table
      ref="multipleTable"
      :data="tableData"
      border
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column align="center" fixed="left" type="selection" width="55">
      </el-table-column>
      <el-table-column
        align="center"
        prop="employeeCode"
        label="编号"
        width="120"
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="employeeName"
        label="姓名"
        width="120"
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="postName"
        label="岗位"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column align="center" prop="phone" label="手机号" width="120">
      </el-table-column>
      <el-table-column align="center" label="创建时间" width="120">
        <template v-slot="scope">
          {{ scope.row.createTime }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="createBy"
        label="创建人"
        width="120"
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="name"
        label="品牌数据权限"
        width="120"
      >
      </el-table-column>
      <el-table-column align="center" prop="enable" label="状态" width="120">
        <template v-slot="scope">
          <el-switch
            v-model="scope.row.enable"
            active-color="#fff"
            inactive-color="#f0f0f0"
            :active-value="1"
            :inactive-value="0"
            :class="{ 'switch-is-actived': scope.row.enable }"
            :change="switchChange(scope.row)"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="name"
        label="操作"
        width="120"
        fixed="right"
      >
        <template #header>
          操作&nbsp;&nbsp;<i class="el-icon-s-operation"></i>
        </template>
        <template v-slot="scope">
          <i class="el-icon-delete" @click="delteItem(scope.row)"></i>
          <i class="el-icon-edit-outline" @click="staffEdit(scope.row)"></i>
          <i class="el-icon-coin" @click="staffData(scope.row)"></i>
        </template>
      </el-table-column>
    </el-table>
    <!-- <staffTable :cols="cols" :tableData="tableData" /> -->
    <pageNation :totalData="parseInt(tableData.length)" :currentPage="1" />
    <!-- 新增员工 -->
    <el-dialog
      title="新增员工"
      v-model="dialogVisible"
      width="50%"
      close-on-press-escape
      top="0"
      :close-on-click-modal="false"
    >
      <el-form :model="form1" :rules="rules" ref="ruleForm" size="small">
        <el-form-item
          label="员工姓名"
          label-width="100px"
          prop="name"
          label-position="right"
        >
          <el-input v-model="form1.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="员工手机号"
          label-width="100px"
          prop="phone"
          label-position="right"
        >
          <el-input v-model.number="form1.phone"></el-input>
        </el-form-item>
        <el-form-item
          label="员工岗位"
          label-width="100px"
          prop="station"
          label-position="right"
        >
          <el-select v-model="form1.station">
            <el-option
              v-for="item in formList"
              :key="item.index"
              :value="item.postCode"
              :label="item.postName"
            ></el-option>
            <el-option label="新增岗位+"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitForm('add')">确 定</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 新增岗位 -->
    <!-- <el-dialog
      title="新增岗位"
      v-model="dialogVisible4"
      width="50%"
      close-on-press-escape
      top="0"
      :close-on-click-modal="false"
    >
      <el-row :gutter="12">
        <el-col :span="12">
          <div class="grid-content">
            <el-steps :active="active" finish-status="success">
              <el-step title="基础设置"></el-step>
              <el-step title="确认完成"></el-step>
            </el-steps>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="grid-content"></div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="grid-content">
            <el-form :model="form1" :rules="rules" ref="ruleForm" size="small">
            </el-form>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24"><div class="grid-content"></div></el-col>
      </el-row>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible4 = false">取 消</el-button>
          <el-button type="primary" @click="submitForm('newwork')"
            >确 定</el-button
          >
        </span>
      </template>
    </el-dialog> -->
    <!-- 编辑员工 -->
    <el-dialog
      title="编辑员工"
      v-model="dialogVisible2"
      width="50%"
      close-on-press-escape
      top="0"
      :close-on-click-modal="false"
    >
      <el-form :model="form2" :rules="rules" ref="ruleForm" size="small">
        <el-form-item
          label="员工姓名"
          label-width="100px"
          prop="name"
          label-position="right"
        >
          <el-input v-model="form2.employeeName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="员工手机号"
          label-width="100px"
          prop="phone"
          label-position="right"
        >
          <el-input v-model.number="form2.phone" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item
          label="员工岗位"
          label-width="100px"
          prop="station"
          label-position="right"
        >
          <el-select v-model="form2.postCode">
            <el-option
              v-for="item in formList"
              :key="item.index"
              :value="item.postCode"
              :label="item.postName"
            ></el-option>
            <el-option label="新增岗位+"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible2 = false">取 消</el-button>
          <el-button type="primary" @click="submitForm('submit2')"
            >确 定</el-button
          >
        </span>
      </template>
    </el-dialog>
    <!-- 数据权限 -->
    <el-dialog
      title="数据权限"
      v-model="dialogVisible3"
      width="50%"
      close-on-press-escape
      top="0"
      :close-on-click-modal="false"
    >
      <div class="title">
        <div class="tit_top">
          <span>姓名:{{ titTop.name }}</span>
          <span>岗位:{{ titTop.postName }}</span>
          <span>手机号:{{ titTop.phone }}</span>
        </div>
        <div class="drop">
          <el-select v-model="dropVal" size="mini" @change="dropChange">
            <el-option value="0" label="不分组">不分组</el-option>
            <el-option value="1" label="分组">分组</el-option>
          </el-select>
        </div>
      </div>
      <div class="table_content">
        <div class="left" v-show="showTree">
          <el-tree
            :data="dataTree"
            show-checkbox
            node-key="code"
            :props="defaultProps"
            @node-click="nodeclick"
          >
          </el-tree>
        </div>
        <div class="right" :style="{ width: width_right }">
          <el-table
            ref="multipleTable"
            :data="tableData1"
            border
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column align="center" type="selection" width="55">
            </el-table-column>
            <el-table-column align="center" label="编号" width="120">
              <template v-slot="scope">{{ scope.$index + 1 }}</template>
            </el-table-column>
            <el-table-column align="center" prop="name" label="品牌名称">
            </el-table-column>
            <el-table-column
              align="center"
              prop="createTime"
              label="创建时间"
              sortable
            >
            </el-table-column>
            <el-table-column align="center" prop="phone" label="联系电话">
            </el-table-column>
          </el-table>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer-data">
          <span>已选择{{}}项</span>
          <el-button @click="dialogVisible3 = false">取 消</el-button>
          <el-button type="primary" @click="submitForm('datarule')"
            >确 定</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { reactive, toRefs, onMounted } from "vue";
import pageNation from "@/components/Pagination/index";
import { ElMessage } from "element-plus";

import {
  getUserList,
  addUserList,
  dropDownlist,
  editUserInfo,
  queryEmployee,
  queryEmployeeTag,
  deleteCurrentEmployee,
  getByTagEnum,
  changeStatusEmplyee,
} from "@/api/users.js";

export default {
  components: {
    pageNation,
  },
  methods: {
    delteItem(v) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteCurrentEmployee({ code: v.employeeCode }).then((res) => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
  setup() {
    const state = reactive({
      dialogVisible: false,
      dialogVisible2: false,
      dialogVisible3: false,
      dialogVisible4: false, //新增岗位弹出
      showTree: false, //是否显示树组件
      active: 0, //步骤条初始位置
      dropVal: "0",
      //表格默认宽度
      width_right: "70%",
      dataTree: [],
      tableData: [],
      //用户权限内部表格
      tableData1: [],
      cols: [
        {
          props: "employeeCode",
          label: "编号",
        },
        {
          props: "employeeName",
          label: "姓名",
        },
        {
          props: "postId",
          label: "岗位",
        },
        {
          props: "phone",
          label: "手机号",
        },
        {
          props: "createTime",
          label: "创建时间",
        },
        {
          props: "createBy",
          label: "创建人",
        },
        {
          props: "brandDataAuthority",
          label: "品牌数据权限",
        },
        {
          props: "entryStatus",
          label: "状态",
        },
        {
          props: "do",
          label: "操作",
        },
      ],
      multipleSelection: [],
      options: [
        {
          value: "全部状态",
          label: "全部状态",
        },
        {
          value: "可用",
          label: "可用",
        },
        {
          value: "禁用",
          label: "禁用",
        },
      ],
      value: "全部状态",
      input3: "",
      formList: [],
      form1: {
        name: "",
        phone: null,
        station: "",
      },
      form2: {
        employeeName: "",
        phone: "",
        postCode: "",
      },
      //数据权限头部数据
      titTop: {
        name: "",
        postName: "",
        phone: "",
      },
      rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        phone: [
          { required: true, message: "请选择活动区域", trigger: "change" },
        ],
      },
      byTag: {}, //标签数据
    });
    const search = (e) => {
      console.log(e);
    };
    // 员工编辑
    const staffEdit = (v) => {
      state.dialogVisible2 = true;
      dropDownlist().then((res) => {
        if (res.code == 200) {
          state.formList = res.data.data;
        }
      });
      queryEmployee({ code: v.employeeCode }).then((res) => {
        console.log(res);
        state.form2 = res.data;
      });
    };
    //表单  状态变更
    const switchChange = (v) => {
      // let obj = {
      //   employeeCode: v.employeeCode,
      //   phone: v.phone,
      //   enable: v.enable,
      // };
      // changeStatusEmplyee(obj).then((res) => {
      //   console.log(res);
      // });
    };
    // 数据权限
    const staffData = (v) => {
      state.dialogVisible3 = true;
      state.titTop.name = v.employeeName;
      state.titTop.postName = v.postName;
      state.titTop.phone = v.phone;
      queryEmployeeTag({ code: "EM1619081690246" }).then((res) => {
        if (res.code == 200) {
          state.byTag = res.data.storeListDTO;
          state.dataTree = res.data.tagTreeVos;
        }
      });
    };
    //权限点击节点触发事件
    const nodeclick = () => {
      getByTagEnum({
        tagTypeNames: state.byTag.tagTypeNames,
        brand: state.byTag.brand,
        tagEnum: 0,
      }).then((res) => {
        if (res.code == 200) {
          state.tableData1 = res.data;
        }
      });
    };
    //下拉框切换
    const dropChange = () => {
      if (state.dropVal == "0") {
        state.width_right = "100%";
        state.showTree = false;
      } else if (state.dropVal == "1") {
        state.width_right = "70%";
        state.showTree = true;
      }
    };
    //下拉框新增岗位
    const newWork = () => {
      state.dialogVisible4 = true;
    };
    //员工新增 下拉框数据
    const addUserLists = () => {
      state.dialogVisible = true;
      dropDownlist().then((res) => {
        if (res.code == 200) {
          state.formList = res.data.data;
        }
      });
    };
    //员工新增保存
    const submitForm = (v) => {
      if (v == "add") {
        addUserList({
          employeeName: state.form1.name,
          phone: state.form1.phone,
          postCode: state.form1.station,
        }).then((res) => {
          if (res.code == 200) {
            ElMessage.success({
              message: "新增成功",
              type: "success",
            });
            state.dialogVisible = false;
          } else {
            ElMessage.success({
              message: "新增失败",
              type: "error",
            });
          }
        });
      } else if (v == "submit2") {
        editUserInfo({
          employeeCode: state.form2.employeeCode,
          employeeName: state.form2.employeeName,
          phone: state.form2.phone,
          postCode: state.form2.postId,
        }).then((res) => {
          console.log(res);
        });
      } else if (v == "datarule") {
      }
    };
    // 员工删除
    // const delteItem = (v) => {

    //   deleteCurrentEmployee({code:v.employeeCode}).then(res => {
    //     if(res.code == 200){
    //         ElMessage.success({
    //           message: "删除成功",
    //           type: "success",
    //         });
    //         getEmployeeList();
    //     }else{
    //         ElMessage.success({
    //           message: "删除失败",
    //           type: "error",
    //         });
    //     }
    //   })
    // }

    //获取员工列表
    const getEmployeeList = () => {
      getUserList({}).then((res) => {
        if (res.code == 200) {
          state.tableData = res.data.data;
        }
      });
    };
    //数据权限表格选项发生变化触发该事件、
    const handleSelectionChange = () => {};
    onMounted(() => {
      //挂载执行一次下拉框获取值
      dropChange();
      getEmployeeList();
    });
    return {
      ...toRefs(state),
      search,
      staffEdit,
      staffData,
      dropChange,
      addUserLists,
      submitForm,
      getEmployeeList,
      handleSelectionChange,
      nodeclick,
      newWork,
      switchChange,
    };
  },
};
</script>

<style lang="less" scoped>
.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.el-select-dropdown__item {
  text-align: center;
}
/deep/ .el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
  color: #31c0fd;
  // color: #b4b4b4;
  background-color: rgb(247, 247, 247);
  border-radius: 2px;
}
.el-icon-date {
  cursor: pointer;
}
.el-icon-date:hover {
  color: #31c0fd;
}
.el-switch {
  // border: 1px solid #409eff;
  // border-radius: 10px;
  /deep/ .el-switch__core {
    background: #fff;
    &::before {
      content: "禁用";
      color: #b4b4b4;
      position: absolute;
      font-size: 12px;
      transform: scale(0.75);
      left: 14px;
      top: -1px;
    }
  }
  &.switch-is-actived {
    /deep/ .el-switch__core {
      border: 1px solid #31c0fd;
      &::before {
        content: "可用";
        color: #31c0fd;
        position: absolute;
        font-size: 12px;
        transform: scale(0.75);
        left: -1px;
        top: -2px;
      }
    }
    /deep/.el-switch__action {
      background-color: #31c0fd;
    }
  }
}
/deep/.el-switch__action {
  position: absolute;
  left: 2px;
  top: 3px;
  width: 12px;
  height: 12px;
  color: #b4b4b4;
}
/deep/.el-dialog {
  position: absolute;
  padding: 10px 30px;
  right: 0;
  height: 100%;
  .el-dialog__footer {
    text-align: left;
  }
  .el-dialog__header {
    border-bottom: 1px solid #ccc;
  }
}
.el-select,
.el-input {
  width: 200px;
}

//数据权限样式、
.title {
  height: 80px;
  .tit_top {
    display: flex;
    justify-content: flex-start;
    span {
      flex: 1;
      display: flex;
      justify-content: flex-start;
      align-items: center;
    }
  }
  .drop {
    height: 40px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
}
.table_content {
  height: 400px;
  display: flex;
  flex-direction: row;
  .left {
    width: 30%;
    height: 100%;
    margin-right: 5px;
    border: 1px solid #e3e3e3;
    border-radius: 10px;
  }
  .right {
    width: 70%;
    height: 100%;
    overflow: auto;
  }
}
.dialog-footer-data {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 45px;
}
</style>
